import React, { PureComponent } from 'react'
import Home from '../pages/Home/Home'
import Profile from '../pages/Profile/Profile'
import './style/01.普通的css写法.css'
import appModule from './style/02.css-module使用.module.css'
import appLesModule from './style/03.css-in-js.module.less'

export default class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      titleSize: 20,
    }
  }

  render() {
    const { titleSize } = this.state

    return (
      <div>
        {/* 内联样式 */}
        <h2 style={{ color: 'red' }}>我是标题</h2>
        <p style={{ fontSize: titleSize }}>我是内容</p>

        {/* 普通的css：没有作用域，会影响其他的组件(不只是父子关心，这种css是全局的) */}
        <p className="content">哈哈哈</p>
        <Home />
        <Profile />

        {/* css module: css中不能出现hy-xxx这种形式的类型，因为在js中这种形式不能引入 */}
        <div className={appModule.abc}>css module</div>
        <p className={appLesModule.exp}>abc</p>
      </div>
    )
  }
}
